<!--  -->
<template>
  <div class="right-box">
    <div class="head-box">

      <img :src="empObj.empHeader" class="head">
      <p class="p1">{{empObj.empName}}</p>
      <p class="p2">{{empObj.companyName}}</p>
     <div class="zhanwei">

      <img src="https://cdn.shhd.info/APP/sys_img/digitalEmployee/clean.png" class="icon-img">
      <img src="https://cdn.shhd.info/APP/sys_img/digitalEmployee/History.png" class="icon-img">
      <img src="https://cdn.shhd.info/APP/sys_img/digitalEmployee/share.png" class="icon-img">
     </div>
     
    </div>


    <div class="wrapper">
      <div class="time-wrapper" v-show="currentDate"> {{ currentDate }}</div>

      <div class="left-wrapper" v-for="item in 20">
        <div class="left-question">123123</div>
        
      </div>
    </div>

    <div class="bottom">

      <el-input v-model="input" placeholder="输入你的问题…"  type="textarea"  :autosize="{ minRows: 1, maxRows: 4 }">
      </el-input>

      <img src="https://cdn.shhd.info/APP/sys_img/digitalEmployee/icon_sendhs.png" class="send"
          >

    </div>
  </div>
</template>

<script>
import common from "@/common/js/common";
export default {
  data () {
    return {
      input: '',
      currentDate:''
    }
  },

  props: {
    empObj: {
      id: Number,
      empName: String,
      default () {
        return "";
      },
      companyName: String,
      default () {
        return "";
      },
      apiToken: String,
      default () {
        return "";
      },

      empHeader: String,
      default () {
        return "";
      },
    },
  },

  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }


}
</script>
<style scoped>
/* @import url(); 引入css类 */
.right-box {
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.head-box {
  width: 100%;
  height: 50px;
  background: #FFFFFF;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
}

.head {
  width: 34px;
  height: 34px;
  border-radius: 50%;

  margin-left: 30px;
}

.p1 {
  height: 14px;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 14px;
  margin-left: 10px;
}

.p2 {
  height: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  margin-left: 8px;
  color: rgba(0,0,0,.4);
}

.icon-img{
  width: 28px;
  height:28px;
  margin-right:22px;

}
.zhanwei{
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.wrapper{
  flex:1;

  display: flex;
  flex-direction: column;
  margin-left: 60px;
  margin-right: 60px;
  overflow-y: scroll;
}

.time-wrapper{
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 10px;
  margin-bottom: 5px;
  align-self: center;
  
}
.left-wrapper{
  max-width: 80%; 
  margin-top: 10px;
  margin-bottom: 10px;
}
.left-question{
 
  background: #EEF5FA;
  border-radius: 8px;
  padding: 10px;
}

.bottom{
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-left: 60px;
  padding-right: 60px;
  height: 54px;
  
  margin-bottom: 50px;
}

.bottom /deep/ .el-textarea__inner {
  
  
  font-size: 14px;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 50px;
  background-color: #ffffff;
  border-radius: 28px  28px  28px  28px ;
  box-shadow: 0px 6px 18px 0px rgba(225,234,244,0.4);
  color: #000000;
  border: 1px solid #D5E1F0;
}

.bottom /deep/ .el-textarea__inner:focus {
  border-color: #226cff;
  outline: 0;
}


.send{
  width: 34px;
  height: 34px;
  position: absolute;
  right: 70px;
  top: 10px;
}

::-webkit-scrollbar{display:none;}
</style>